let browerType = 'Bing';
const logoImg = document.querySelector('.logo-img');
const suggest = document.querySelector('.suggest')
const select = document.querySelector('.select')
const inp = document.querySelector('.search-inp');
//搜索
//背景图片
const backgroundImage = document.getElementById('#backgroundImage')
//切换搜索引擎
select.addEventListener('change', function (e) {
    browerType = e.target.value
    if (browerType === 'Bing') {
        imgUrl = 'https://ts1.cn.mm.bing.net/th?id=ODLS.be51c863-330b-438b-bf0f-ea99978c5aeb&w=32&h=32&qlt=94&pcl=fffffa&o=6&pid=1.2';
        logoImg.src = imgUrl;
    } else if (browerType === 'Baidu') {
        imgUrl = 'https://ts3.cn.mm.bing.net/th?id=ODLS.b689dae1-edfb-4adf-aad6-fbef599f8e14&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2'
        logoImg.src = imgUrl
    } else if (browerType === 'Google') {
        imgUrl = 'https://ts4.cn.mm.bing.net/th?id=ODLS.79d7c869-d108-4a09-965b-6f9cfe1c079d&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2'
        logoImg.src = imgUrl
    }
})
//回车跳转搜索
inp.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        goSearch(browerType)
    }
})
//搜索提示逻辑
inp.addEventListener('focus', debounce(getData, 500));
//失去焦点关闭提示框
inp.addEventListener('blur', function () {
    setTimeout(() => {
        suggest.style.visibility = 'hidden'; 
    }, 200);
});
//输入内容更新提示框
inp.addEventListener('input', debounce(getData, 200))
//根据选择浏览器类型，更换不同的搜索引擎
function goSearch(browerType) {
    if (browerType === 'Bing') {
        const url = `https://cn.bing.com/search?q=${inp.value}`
        window.open(url, '_blank');
    } else if (browerType === 'Baidu') {
        const url = `https://www.baidu.com/s?wd=${inp.value}`
        window.open(url, '_blank');
    } else if (browerType === 'Google') {
        const url =  `https://www.google.com/search?q=${inp.value}`
        window.open(url, '_blank');
    }
}
//获取搜索建议
function getSug(suggestions) {
    while (suggest.firstChild) {
        suggest.removeChild(suggest.firstChild);
    }
    for (let i = 0; i < suggestions.length; i++) {
        // 创建一个新的<div>元素
        let newDiv = document.createElement('div');
        let newP = document.createElement('p')
        // 设置<div>元素的文本内容为suggestions数组中对应索引位置的内容
        newDiv.appendChild(newP)
        newP.textContent = suggestions[i];
        //当文字超出p标签时省略显示
        newDiv.style.overflow = 'auto';
        // 将<div>元素添加到suggest容器中
        suggest.appendChild(newDiv);
        // 为<p>标签添加点击事件
        newDiv.addEventListener('click', function (e) {
            // 在点击时跳转到指定页面
            if (browerType === 'Bing') {
                inp.value = suggestions[i]
                const url = `https://cn.bing.com/search?q=${suggestions[i]}`
                window.open(url, '_blank');
            } else if (browerType === 'Baidu') {
                inp.value = suggestions[i]
                const url = `https://www.baidu.com/s?wd=${suggestions[i]}`
                window.open(url, '_blank');
            } else if (browerType === 'Google') {
                inp.value = suggestions[i]
                console.log(666);
            }
        });
    }
}
//请求api接口获取建议数据
function getData() {
    // 创建一个<script>标签并设置src属性为跨域请求的URL
    let script = document.createElement('script');
    if (browerType === 'Bing') {
        script.src = `http://api.bing.com/qsonhs.aspx?type=cb&q=${inp.value == '' ? '' : inp.value}&cb=callback`
    } else if (browerType === 'Baidu') {
        script.src = `http://suggestion.baidu.com/su?wd=${inp.value == '' ? '' : inp.value}&cb=callback`
    } else if (browerType === 'Google') {
        script.src = `http://suggestqueries.google.com/complete/search?client=youtube&q=${inp.value == '' ? '' : inp.value}&cb=callback`
    }
    // 将<script>标签添加到页面中
    document.body.appendChild(script);
    document.body.removeChild(script);//删除script标签  
}
//jsonp请求的回调函数
function callback(data) {
    if (browerType === 'Baidu') {
        if (data.s.length == 0) {
            suggest.style.visibility = 'hidden'
        } else {
            getSug(data.s)
            suggest.style.visibility = 'visible'
        }
    } else if (browerType === 'Bing') {
        //获取bing搜索推荐
        const res = data.AS.Results
        const sug1 = res[0]?res[0].Suggests:[];
        const sug2 = res[1] ? res[1].Suggests : []; 
        let sugArr = sug1.concat(sug2)
        const sugData = sugArr.map((item) => {
            return item.Txt
        })
        if (sugData.length == 0) {
            suggest.style.visibility = 'hidden'
        } else {
            getSug(sugData)
            suggest.style.visibility = 'visible'
        }
    }else if(browerType === 'Google'){
        //待补充
        console.log(666);
    }



}
//防抖函数
function debounce(fn, delay) {
    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        const context = this;
        const args = arguments;
        timer = setTimeout(() => {
            fn.apply(context, args);
        }, delay);
    }
}
//初始化页面时获取输入框焦点
inp.focus()
